<!--
 * @Description: 中国与世界地图切换，中国地图下一级市级
 * @author: 
 * @since:2024-07-24
 * @page: map.vue
-->
<template>
  <button @click="changeMapType">中国与世界地图切换</button>
  <button @click="backToChinaMap">返回中国地图上一级</button>
  <div ref="chart" class="chart"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import chinaJSON from '@/assets/map/china.json'
import worldJSON from '@/assets/map/world.json'
import { useMapHook } from '@/utils/map/hook.js'
import * as echarts from 'echarts'
const { getOptions } = useMapHook()
const mapType = ref('china')
const chart = ref()
let charts
const init = (mapType, data) => {
  const dom = chart.value
  if (charts) echarts.dispose(dom)
  charts = echarts.init(dom)
  echarts.registerMap(mapType, data)
  charts.setOption(getOptions(mapType))
  charts.on('click', handleRegionClick)
}
const changeMapType = () => {
  mapType.value == 'china' ? (mapType.value = 'world') : (mapType.value = 'china')
  if (mapType.value == 'china') {
    init(mapType.value, chinaJSON)
  } else {
    init(mapType.value, worldJSON)
  }
}
const handleRegionClick = (param) => {
  const provinceCode = chinaJSON.features.find((item) => item.properties.name == param.name)?.id
  console.log('provinceCode', provinceCode)
  if (provinceCode && provinceCode !== '100000') {
    import(`@/assets/map/city/${provinceCode}.json`).then((provinceMapData) => {
      mapType.value = provinceCode
      init(mapType.value, provinceMapData)
    })
  }
}

const backToChinaMap = () => {
  mapType.value = 'china'
  init(mapType.value, chinaJSON)
}
// 获取所有省份数据，悬浮时过滤或封装根据省份请求其他信息的函数，悬浮时调用防抖后的函数
onMounted(() => {
  init(mapType.value, chinaJSON)
})
</script>

<style scoped lang="scss">
.chart {
  width: 800px;
  height: 800px;
  color: #cbcdca;
}
</style>
<style lang="scss">
.chart-tooltip-item-container {
  color: #fff;
  animation: name duration timing-function delay iteration-count direction fill-mode;
  .title {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 100%;
      background-color: red;
      margin-right: 6px;
    }
    .blue {
      background-color: rgb(66, 133, 242);
    }
    .green {
      background-color: green;
    }
    .orange {
      background-color: orange;
    }
    .name {
      margin-right: 8px;
    }
  }
}
</style>
@/utils/map/hook.js
